<template>
  <div class="container">
    <header>
      <van-nav-bar title="个人资料" left-arrow @click-left="$router.push({path:'/mine'})" />
    </header>
    <div class="content">
      <van-notice-bar
        :scrollable="false"
        text="完善个人资料，获得更优内容推荐"
        color="#999"
      />
      <div class="box">
         <label>昵称: <input type="text" v-model="name"></label>
         <label>头像: 
            <p @click="$refs.file.click()" class="modify">点击修改头像</p>
            <input type="file" hidden ref='file' @change="onFileChange">        
           </label>
         <label>性别:
           <div :class="sex? '':'active'" @click="sex =0">女</div>
           <div :class="sex? 'active':''" @click="sex =1">男</div>
         </label>
      </div>
    </div>
    <footer>
      <van-button type="primary" color="#ffd101" round block @click='submitEvt'>提交</van-button>
    </footer>
  </div>
</template>
<script>
export default {
    data(){
        return{
            phone:'',
            sex:0,
            name:'',
            myInfo:{}
        }
    },

    created(){
      // 初始化获取用户信息
       let res = JSON.parse(sessionStorage.getItem('userInfo'))|| {}
      if(res.name){
         this.name = res.name
         this.sex = res.sex
      } else {
        this.phone = JSON.parse(sessionStorage.getItem("vuex")).common.userInfo.id
      // 如果昵称不存在，显示手机号
        this.name = this.phone
      }
      
 
    },

    methods:{
        submitEvt(){
            this.myInfo.phone = this.phone
            this.myInfo.sex = this.sex  
            this.myInfo.name = this.name 
            sessionStorage.setItem('userInfo', JSON.stringify(this.myInfo))
            this.$router.push({path:`/mine`, query:{code: 200}})
        },
        onFileChange(){
            // 不知道如何上传
          }

    }
}
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
}
header {
  display: block;
  height: 46px;
}
.content {
  background-color: #e9ecf1;
  overflow-x: hidden;
  height: calc(100% - 110px);
  .box {
    margin: 10px 10px;
    background-color: #fff;
    border-radius: 18px;
    height: 200px;
    padding: 14px 16px;
    label{
        display: block;
        line-height: 50px;
        color: rgb(83, 83, 83);
        font-size: 0.9rem;
        input{
            border: none;
            outline: none;
          
        }
        .modify{
            display: inline-block;
            background-image: url(../../images/log.jpg);
            background-position: center right;
            background-size: 32px;
            background-repeat: no-repeat;
            width: 300px;
          }
        div{
            float: right;
            height: 30px;
            width: 50px;
            background-color: rgba(153, 153, 153, 0.596);
            line-height: 30px;
            text-align: center;
            margin-left: 30px;
            margin-top: 8px;
            border-radius: 8px;
            &.active{
                background-color: rgb(247, 243, 32);
            }
        }
    }
  }
}
footer {
  display: block;
  background-color: #fff;
  margin: 10px;
}
</style>